<template>
  <a-modal
      v-model:visible="detailVisible"
      title="作品详情"
      width="900px"
      destroyOnClose
      @cancel="handleDetailCancel"
  >
    <!-- 加载状态 -->
    <div v-if="isLoading" class="loading-container">
      <a-spin size="large" tip="加载作品详情中..." />
    </div>

    <!-- 错误状态 -->
    <div v-else-if="hasError" class="error-container">
      <a-empty description="获取作品详情失败，请重试" />
      <a-button type="primary" style="margin-top: 16px" @click="fetchWorkDetail">
        重新加载
      </a-button>
    </div>

    <!-- 作品详情内容 -->
    <div v-else-if="currentWork" class="detail-content">
      <!-- 视频播放区域 -->
      <div class="video-container">
        <video
            :src="minioUrl + currentWork.videoUrl"
            class="work-video"
            controls
            :poster="minioUrl + currentWork.coverFileUrl"
            preload="metadata"
            :alt="currentWork.worksName + '的视频'"
        >
          您的浏览器不支持视频播放
        </video>
      </div>

      <!-- 作品信息区域 -->
      <div class="detail-info">
        <h2 class="detail-title">{{ currentWork.worksName }}</h2>

        <div class="detail-status">
          <span :class="getStatusClass(currentWork.status)">
            {{ getStatusText(currentWork.status) }}
          </span>
        </div>

        <p class="detail-desc">{{ currentWork.description || '无描述' }}</p>

        <div class="detail-tags">
          <a-tag
              v-for="(tagName, i) in workTagMap[currentWork.id] || []"
              :key="i"
              color="blue"
              size="small"
              v-if="tagName"
          >
            {{ tagName }}
          </a-tag>
        </div>

        <div class="detail-meta">
          <div class="meta-item">
            <CalendarOutlined />
            <span>创建时间：{{ formatDate(currentWork.createTime) }}</span>
          </div>
          <div class="meta-item">
            <span v-if="currentWork.isCharge === 1" class="price-tag">
              <MoneyOutlined /> 收费：{{ currentWork.price || 0 }}元
            </span>
            <span v-else class="free-tag">
              <MoneyOutlined /> 免费
            </span>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, defineEmits } from 'vue';
import { CalendarOutlined } from '@ant-design/icons-vue';
import { getWorksById } from '@/api/media/bizWorksController'; // 导入接口

// 定义类型
interface BizWorks {
  id: number;
  worksName: string;
  videoUrl: string;
  coverFileUrl: string;
  status: number;
  description: string;
  isCharge: number;
  price?: number;
  createTime: string;
}

// 接收父组件参数
const props = defineProps<{
  visible: boolean; // 控制弹窗显示隐藏
  workId: number; // 作品ID
  minioUrl: string; // minio 基础路径
  workTagMap: Record<number, string[]>; // 作品标签映射
}>();

// 向父组件传递事件
const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void; // 关闭弹窗时通知父组件更新 visible 状态
}>();

// 组件内部状态
const detailVisible = ref(props.visible);
const currentWork = ref<BizWorks | null>(null);
const isLoading = ref(false);
const hasError = ref(false);

// 监听父组件 visible 变化，同步到子组件内部
watch(
    () => props.visible,
    (newVisible) => {
      detailVisible.value = newVisible;
      // 当弹窗打开时，获取作品详情
      if (newVisible) {
        fetchWorkDetail();
      }
    }
);

// 获取作品详情数据
const fetchWorkDetail = async () => {
  isLoading.value = true;
  hasError.value = false;

  try {
    const response = await getWorksById({
      id: props.workId, // 传递作品ID
    });

    if (response.code === '00000' && response.data) {
      currentWork.value = response.data;

    } else {
      console.error('获取作品详情失败', response.message);
      hasError.value = true;
    }
  } catch (error) {
    console.error('请求接口出错', error);
    hasError.value = true;
  } finally {
    isLoading.value = false;
  }
};

// 关闭弹窗事件
const handleDetailCancel = () => {
  detailVisible.value = false;
  emit('update:visible', false);
  currentWork.value = null; // 重置作品数据
};

// 状态文本映射
const getStatusText = (status: number) => {
  const statusMap: Record<number, string> = {
    1: '开放',
    2: '隐藏',
  };
  return statusMap[status] || '未知';
};

// 获取状态样式
const getStatusClass = (status: number) => {
  const classMap: Record<number, string> = {
    1: 'status-open',
    2: 'status-hidden',
  };
  return classMap[status] || '';
};

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleDateString();
};
</script>

<style scoped>
.detail-content {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.video-container {
  width: 50%;
}

.work-video {
  width: 100%;
  height: auto;
}

.detail-info {
  flex: 1;
}

.detail-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.detail-status {
  margin-bottom: 10px;
}

.detail-desc {
  margin-bottom: 15px;
  line-height: 1.6;
}

.detail-tags {
  margin-bottom: 15px;
}

.detail-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.price-tag {
  color: red;
}

.free-tag {
  color: green;
}

.loading-container,
.error-container {
  width: 100%;
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>